
:host {
  display: flex;
}
.settings {
  flex: 1;
  display: flex;
  flex-direction: row;
  padding: 10px;
  overflow: hidden;
}
.settings > .slider {
  width: 150px;
  border: 1px solid var(--color-normal-border-weaker);
  border-radius: calc(var(--size-normal-radius) * 1px);
  overflow-y: auto;
  background-color: var(--color-normal-fill-emphasis);
}
.settings > .slider::-webkit-scrollbar {
  display: block;
  border-left: 1px solid var(--color-normal-border-weaker);
}
.settings > .slider > header {
  margin-top: 6px;
  padding: 0 10px;
  color: var(--color-normal-contrast-important);
}
.settings > .slider > ul > li {
  padding-top: 10px;
}
.settings > .slider > ul > li > ui-label {
  opacity: 0.5;
  text-align: left;
  margin-left: 16px;
  font-size: calc(var(--size-little-font) * 1px);
}
.settings > .slider > ul > li > ul > li {
  cursor: pointer;
  transition: background-color 0.2s;
  padding: 8px 20px;
  text-align: center;
}
.settings > .slider > ul > li > ul > li:hover,
.settings > .slider > ul > li > ul > li[active] {
  background-color: var(--color-active-fill-emphasis);
  color: var(--color-active-contrast-emphasis);
}
.settings > .content {
  flex: 1;
  margin-left: 6px;
  padding: 25px;
  border: 1px solid var(--color-normal-border-weaker);
  border-radius: calc(var(--size-normal-radius) * 1px);
  overflow: auto;
}
.settings > .content > ui-setting ui-prop,
.settings > .content > .general ui-prop,
.settings > .content > .laboratory ui-prop {
  --left-width: 40%;
  margin-bottom: 4px;
}
.settings > .content > ui-setting ui-prop > ui-file,
.settings > .content > .general ui-prop > ui-file,
.settings > .content > .laboratory ui-prop > ui-file,
.settings > .content > ui-setting ui-prop > ui-input,
.settings > .content > .general ui-prop > ui-input,
.settings > .content > .laboratory ui-prop > ui-input,
.settings > .content > ui-setting ui-prop > ui-num-input,
.settings > .content > .general ui-prop > ui-num-input,
.settings > .content > .laboratory ui-prop > ui-num-input,
.settings > .content > ui-setting ui-prop > ui-select,
.settings > .content > .general ui-prop > ui-select,
.settings > .content > .laboratory ui-prop > ui-select {
  flex: 1;
}
.settings > .content > ui-setting p,
.settings > .content > .general p,
.settings > .content > .laboratory p {
  margin-top: 0;
}
.settings > .content > .laboratory {
  margin-top: -10px;
}
.settings > .content > .laboratory > ui-setting {
  outline: none;
}
.settings > .content > .laboratory > ui-setting > .mark {
  color: var(--color-normal-contrast-weakest);
  opacity: 0.3;
}
.settings > .content > .laboratory > ui-setting > ui-prop {
  margin-left: 20px;
}
